<template>
    <div id="floatingProfitAndLoss" style="width:100%;height:400px;"></div>

</template>

<script>
import echarts from 'echarts';

export default {
    data() {
        return {

        }
    },
    mounted() {
        let graphicsData = JSON.parse(localStorage.getItem('graphicsData'))

        this.$nextTick(() => {
            let tradeChart = echarts.init(document.getElementById('floatingProfitAndLoss'));
            let option = {

                title: {
                    text: '浮盈/浮亏',
                    left: 'center'
                },
                xAxis: {
                    name: '日期',
                    type: 'category',
                    data: graphicsData.floatingProfitAndLossGraph.timeline
                },
                yAxis: {
                    type: 'value',
                    name: '浮盈/浮亏%'
                },
                dataZoom: [  // 滑动缩放
                    {
                        // startValue: '11:10:11'
                    },
                    {
                        type: "inside", // 拖动x轴缩放
                    },
                ],
                calculable: true,



                series: [
                    {
                        data: graphicsData.floatingProfitAndLossGraph.dataDay,
                        type: 'line'
                    },

                ]
            };
            tradeChart.setOption(option);

            window.addEventListener('resize', function () {
                tradeChart.resize();
            })
        })

    },
}
</script>
<style lang="scss" scoped></style>